<template>
  <div class="svg-container">
    <SvgTest style="border: 1px #333 solid" />
    <SvgTest2 style="border: 1px #333 solid" />
  </div>
</template>

<script>
import * as d3 from 'd3'
import SvgTest from './SvgTest'
import SvgTest2 from './SvgTest2'

export default {
  name: 'Index',
  components: {
    SvgTest,
    SvgTest2
  },
  data() {
    return {
      svg1Flag: false
    }
  },
  mounted() {
    this.handleSvg1Color()
  },
  methods: {
    handleSvg1Color() {
      let isRed = false
      const svg1 = d3.select('[data-id=svg_1]')
      // svg1的点击事件
      svg1.on('click', () => {
        if (confirm('是否启动设备？') === true) {
          this.svg1Flag = true
        }
      })

      setInterval(() => {
        if (this.svg1Flag) {
          svg1.attr('fill', isRed ? '#fff' : '#f44')
          isRed = !isRed
        }
      }, 500)

      let isReset = false
      const svg1G = d3.select('[data-id=svg1-g]')
      setInterval(() => {
        if (this.svg1Flag) {
          isReset ? svg1G.attr('transform', 'translate(-100,0)') : svg1G.transition().duration(1000).attr('transform', 'translate(0,0)').ease(d3.easeLinear)
          isReset = !isReset
        }
      }, 1500)
    }
  }
}
</script>

<style scoped lang="css">
.svg-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
</style>
